/*
 * @Author: xiaosihan 
 * @Date: 2024-09-18 00:47:15 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-22 22:57:07
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./projectSetting.module.less";
import PCHeader from "../PCHeader/PCHeader";
import { Breadcrumb, Button, Checkbox, message, Modal, Tooltip } from "antd";
import hashHistory from "@hashHistory";
import { useParams } from "react-router-dom";
import projectDatailStore from "../ProjectDatail/projectDatailStore";
import { ProjectCollaborationData } from "@type";
import projectCollaborationStore from "../ProjectCollaboration/projectCollaborationStore";
import TextArea from "antd/es/input/TextArea";
import { debounce } from "lodash";

interface Iprops {
    children?: ReactNode
}

// 项目设置
export default function ProjectSetting(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const parames = useParams();
    const [projectId, setProjectId] = useState(projectDatailStore.id);
    const [name, setName] = useState(projectDatailStore.name);
    const [description, setDescription] = useState(projectDatailStore.description);
    const [isPublic, setIsPublic] = useState(projectDatailStore.isPublic);
    const saveData: Partial<ProjectCollaborationData> = { id: parames.id };
    useEffect(() => {
        projectDatailStore.setId(parames.id || "");
    }, []);

    useEffect(() => autorun(() => {
        setProjectId(projectDatailStore.id);
        setName(projectDatailStore.name);
        setDescription(projectDatailStore.description);
        setIsPublic(projectDatailStore.isPublic);
    }), []);

    const save = () => {
        try {
            projectDatailStore.updata(saveData);
            message.success("保存成功");
        } catch (error) {
            message.error("保存失败");
        }
    }

    return (
        <div
            ref={dom}
            className={styles.projectSetting}
        >
            <PCHeader />
            <div>
                <Breadcrumb
                    className={styles.breadcrumb}
                    items={[
                        {
                            title: <a>项目管理</a>,
                            onClick() {
                                hashHistory.push("/projectCollaboration");
                            }
                        },
                        {
                            title: name,
                        },
                        {
                            title: "设置"
                        }
                    ]}
                />
            </div>
            <div className={styles.container} >
                <div className={styles.title} >项目设置</div>
                <input
                    type="text"
                    key={`name=${name}`}
                    defaultValue={name}
                    className={styles.input}
                    placeholder="请输入项目名称"
                    onChange={async (e) => {
                        const name = (e.target as HTMLInputElement).value;
                        saveData.name = name;
                    }}
                />
                <TextArea
                    showCount
                    id=""
                    name=""
                    key={`description=${description}`}
                    style={{ resize: 'none' }}
                    defaultValue={description}
                    className={styles.description}
                    maxLength={200}
                    onChange={debounce((e) => {
                        const value = e.target.value.replace(/\n+/g, '\n');
                        e.target.value = value;
                        saveData.description = value;
                    }, 500)}
                />
                <Checkbox
                    checked={false}
                    onChange={(e) => {

                    }}>
                    对访客隐藏敏感内容
                </Checkbox>
                <div className={styles.split}></div>
                <div className={styles.title} >项目公开性</div>
                <div className={styles.split}></div>
                <Checkbox
                    checked={isPublic === 0}
                    onChange={(e) => {
                        setIsPublic(0);
                        saveData.isPublic = 0;
                    }}>
                    私有项目 仅项目成员可以查看和编辑该项目
                </Checkbox>
                <div className={styles.split}></div>
                <Checkbox
                    checked={isPublic === 1}
                    onChange={(e) => {
                        setIsPublic(1);
                        saveData.isPublic = 1
                    }}>
                    公开项目 在互联网上公开这个项目，所有人都可以查看, 但仅项目成员可以编辑此项目
                </Checkbox>
                <div className={styles.split}></div>
                <Button onClick={save} type="primary">保存设置</Button>
                <div className={styles.split}></div>
                <div className={styles.title} >删除项目</div>
                <div className={styles.split}></div>
                <div>项目删除后，所有的内容也将被立刻删除，请谨慎操作。</div>
                <div className={styles.split}></div>
                <Tooltip
                    rootClassName={styles.delete_tip}
                    placement="right"
                    mouseEnterDelay={0}
                    trigger={["click"]}
                    title={
                        <Button
                            danger
                            type="primary"
                            size="small"
                            onClick={async () => {
                                await projectCollaborationStore.delete(projectId);
                                hashHistory.push("/projectCollaboration");
                            }}
                        >确认删除</Button>
                    }
                >
                    <Button
                        type="primary"
                        className="danger"
                        danger
                    >了解风险，确认删除</Button>
                </Tooltip>

            </div>
        </div>
    );

}